<template>
  <div class="procurement-package">
    <div class="package-header">
      <div class="package-title">采购包 {{ packageNumber }}</div>
      <button
          v-if="showRemove"
          class="remove-package"
          @click="$emit('remove')"
      >
        <i class="fas fa-times"></i>
      </button>
    </div>

    <div class="form-group">
      <label class="form-label required">报价方式</label>
      <div class="radio-group">
        <label class="radio-item">
          <input
              type="radio"
              :name="`pricingMethod${packageData.id}`"
              value="TotalPrice"
              :checked="packageData.pricingMethod === 'TotalPrice'"
              @change="updateData({ pricingMethod: 'TotalPrice' })"
          >
          <span>总价</span>
        </label>
        <label class="radio-item">
          <input
              type="radio"
              :name="`pricingMethod${packageData.id}`"
              value="DiscountRate"
              :checked="packageData.pricingMethod === 'DiscountRate'"
              @change="updateData({ pricingMethod: 'DiscountRate' })"
          >
          <span>折扣率</span>
        </label>
        <label class="radio-item">
          <input
              type="radio"
              :name="`pricingMethod${packageData.id}`"
              value="PromotionRate"
              :checked="packageData.pricingMethod === 'PromotionRate'"
              @change="updateData({ pricingMethod: 'PromotionRate' })"
          >
          <span>优惠率</span>
        </label>
        <label class="radio-item">
          <input
              type="radio"
              :name="`pricingMethod${packageData.id}`"
              value="Quantity"
              :checked="packageData.pricingMethod === 'Quantity'"
              @change="updateData({ pricingMethod: 'Quantity' })"
          >
          <span>数量</span>
        </label>
        <label class="radio-item">
          <input
              type="radio"
              :name="`pricingMethod${packageData.id}`"
              value="UnitPrice"
              :checked="packageData.pricingMethod === 'UnitPrice'"
              @change="updateData({ pricingMethod: 'UnitPrice' })"
          >
          <span>单价</span>
        </label>
        <label class="radio-item">
          <input
              type="radio"
              :name="`pricingMethod${packageData.id}`"
              value="Other"
              :checked="packageData.pricingMethod === 'Other'"
              @change="updateData({ pricingMethod: 'Other' })"
          >
          <span>其他</span>
        </label>
      </div>
    </div>

    <div class="form-group">
      <label class="form-label required">采购包类别</label>
      <div class="radio-group">
        <label class="radio-item">
          <input
              type="radio"
              :name="`packageType${packageData.id}`"
              value="SERVICE"
              :checked="packageData.packageType === 'SERVICE'"
              @change="updateData({ packageType: 'SERVICE' })"
          >
          <span>服务类</span>
        </label>
        <label class="radio-item">
          <input
              type="radio"
              :name="`packageType${packageData.id}`"
              value="GOODS"
              :checked="packageData.packageType === 'GOODS'"
              @change="updateData({ packageType: 'GOODS' })"
          >
          <span>货物类</span>
        </label>
        <label class="radio-item">
          <input
              type="radio"
              :name="`packageType${packageData.id}`"
              value="ENGINEERING"
              :checked="packageData.packageType === 'ENGINEERING'"
              @change="updateData({ packageType: 'ENGINEERING' })"
          >
          <span>工程类</span>
        </label>
      </div>
    </div>

    <div class="form-group">
      <label class="form-label required">是否专门面向中小企业</label>
      <div class="select-wrapper">
        <select
            :value="packageData.sme"
            @change="updateData({ sme: ($event.target as HTMLSelectElement).value})"
        >
          <option value="">请选择是否专门面向中小企业</option>
          <option value="true">是</option>
          <option value="false">否</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <label class="form-label required">是否接受联合体响应</label>
      <div class="select-wrapper">
        <select
            :value="packageData.acceptJointResponse"
            @change="updateData({ acceptJointResponse: ($event.target as HTMLSelectElement).value})"
        >
          <option value="">请选择是否接受联合体响应</option>
          <option value="true">是</option>
          <option value="false">否</option>
        </select>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useProcurementPackage} from '../scripts/procurementPackage'
import type {PackageData} from '../types'

defineProps<{
  packageData: PackageData
  packageNumber: number
  showRemove: boolean
}>()

const emit = defineEmits<{
  remove: []
  update: [data: Partial<PackageData>]
}>()

const {updateData} = useProcurementPackage(emit)
</script>
